<template>
    <div v-if="userStore.userInfo.Id">
        <h2>门店列表</h2>
        登录人名称:{{userStore.userInfo.UserName}}
        <input type="button" value="门店增加" @click="add">
        <div>
            门店名称:<input type="text" v-model="a.shopName" />
            开业时间：<input type="date" v-model="a.date1" />
            <input type="button" value="查询" @click="show">
            <input type="button" value="批量删除" @click="delall">
            <input type="button" value="批量启用" @click="updateStateAll(1)">
            <input type="button" value="批量禁用" @click="updateStateAll(0)">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @click="checkall" /></td>
                    <td>ID</td>
                    <td>门店名称</td>
                    <td>分店名称</td>
                    <td>门店图片</td>
                    <td>门店状态</td>
                    <td>门店开业时间</td>
                    <td>门店特色</td>
                    <td>介绍</td>
                    <td>位置</td>
                    <td>类型</td>
                   
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.Id">
                    <td><input type="checkbox" v-model="ids" :value="item.Id" @change="checkone" /></td>
                    <td>{{ item.Id }}</td>
                    <td>{{ item.ShopName }}</td>
                    <td>{{ item.BranchName }}</td>
                    <td><img :src="item.Phote" width="200"></td>
                    <td>{{ item.State == 1 ? "开业" : "倒闭" }}</td>
                    <td>{{ moment(item.BeginTime).format("YYYY-MM-DD HH:mm:ss") }}</td>
                    <td>{{ item.Feature }}</td>
                    <td>{{ item.Desc }}</td>
                    <td>{{ item.Name }}</td>
                    <td>
                        <span v-if="item.ShopType == 1">普通酒店</span>
                        <span v-if="item.ShopType == 2">三星酒店</span>
                        <span v-if="item.ShopType == 3">五星级酒店</span>
                        <span v-if="item.ShopType == 4">电竞酒店</span>
                        <span v-if="item.ShopType == 5">商务酒店</span>
                        <span v-if="item.ShopType == 6">民宿</span>
                    </td>
                   
                    <td><input type="button" value="详情"  @click="detail(item.Id)"/>
                        <input type="button" value="修改" @click="update(item.Id)" />
                        <input type="button" value="删除" @click="del(item.Id)" />
                        <input type="button" value="启用" v-if="item.State == 0" @click="updateState(item.Id, 1)" />
                        <input type="button" value="禁用" v-if="item.State == 1" @click="updateState(item.Id, 0)" />
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <span>共<b>{{ data.totalCount }}</b>条</span>
            <span>每页<b>{{ a.pageSize }}</b>条</span>
            <span>当前<b>{{ a.pageIndex }}/{{ data.totalPage }}</b>页</span>
            <select v-model="a.pageSize" @change="show">
                <option :value="item2" v-for="item2 in arr" :key="item2">{{ item2 }}</option>
            </select>
            <input type="button" value="首页" @click="goPage(1)" />
            <input type="button" value="上一页" @click="goPage(a.pageIndex - 1)" />
            <span v-for="item in data.totalPage" @click="goPage(item)">{{ item }}</span>
            <input type="button" value="下一页" @click="goPage(a.pageIndex + 1)" />
            <input type="button" value="尾页" @click="goPage(data.totalPage)" />
            <input type="number" v-model="a.pageIndex" />
            <input type="button" value="跳转" @click="goPage(a.pageIndex)">
        </div>
    </div>
    <div v-else>您还没登录</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '../../stores/user';
import axios from 'axios';
import moment from 'moment';

const userStore=useUserStore();
const router = useRouter();
const route = useRoute();
const add = () => {
    router.push("/addshop")
}


onMounted(() => {
    getlist();
})
let a: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    shopName: '',
    date1: ''
})
let data: any = reactive({
    list: [],
    totalCount: 0,
    totalPage: 0
})
//分页的下拉框(页容量)
let arr = ref([2, 4, 6, 8]);

//声明一个变量控制复选框选中与没选中
let checked = ref(false);

//声明多个变量控制复选框选中与没选中
let ids = ref([]);


const checkall = () => {
    checked.value = !checked.value;
    if (checked.value === true) {
        ids.value = data.list.map((item: any) => {
            return item.Id
        })
    }
    else {
        ids.value = [];
    }
}

const checkone = () => {
    if (ids.value.length == data.list.length) {
        checked.value = true;
    }
    else {
        checked.value = false;
    }
}

const updateStateAll=(state:any)=>{
    if (ids.value.length == 0) {
        alert("必选");
        return;
    }
    let f = confirm("确认要修改状态吗？");
    if (f == true)
    {
        axios({
            url:'/api/Shop/UpdateStateAll',
            method:'put',
            params:{
                ids:ids.value.toString(),
                state:state
            }
        })
        .then((res) => {
                console.log(res)
                if (res.data > 0) {
                    alert("修改成功");
                    checked.value=false;
                    ids.value=[];
                    getlist();
                }
            })
            .catch((err) => {
                console.log(err);
                checked.value=false;
            })
    }
}


const delall: any = () => {
    if (ids.value.length == 0) {
        alert("必选");
        return;
    }
    let f = confirm("确认要全删除吗？");
    if (f == true) {
        axios({
            url:'/api/Shop/DelAllShop',
            method:'delete',
            params:{
                ids:ids.value.toString()
            }
        })
        .then((res) => {
                console.log(res)
                if (res.data > 0) {
                    alert("删除成功");
                    checked.value=false;
                    getlist();
                }
            })
            .catch((err) => {
                console.log(err);
                checked.value=false;
            })
    }
}


const update: any = (id: any) => {
    router.push({
        path: '/updateshop',
        query: { id: id }
    })
}
const detail: any = (id: any) => {
    router.push({
        path: '/detail',
        query: { id: id }
    })
}
const del: any = (id: any) => {
    let f = confirm("确认删除");
    if (f) {
        axios({
            method: 'delete',
            url: '/api/Shop/Del',
            params: { id: id }
        })
            .then((res) => {
                console.log(res)
                if (res.data > 0) {
                    alert("删除成功");
                    getlist();
                }
            })
            .catch((err) => {
                console.log(err);
            })
    }

}


const goPage = (num: any) => {
    if (num < 1) {
        a.pageIndex == 1;
        return;
    }
    if (num > data.totalPage) {
        a.pageIndex == data.totalPage;
        return;
    }
    a.pageIndex = num;
    getlist();
}
//查询+页容量
const show = () => {
    a.pageIndex = 1;
    getlist();

}

const getlist = () => {
    axios({
        method: 'get',
        url: '/api/Shop/GetShopList',
        params: a
    })
        .then((res) => {
            console.log(res)
            data.list = res.data.list;
            data.totalCount = res.data.totalCount;
            data.totalPage = res.data.totalPage;

        })
        .catch((err) => {
            console.log(err);
        })
}
const updateState = (id: any, state: any) => {
    let f = confirm("确认修改？")
    if (f) {
        axios({
            method: 'put',
            url: '/api/Shop/UpdateState',
            params: {
                id: id,
                state: state
            }
        })
            .then((res) => {
                console.log(res)
                if (res.data > 0) {
                    alert("成功");
                    getlist();
                }
            })
            .catch((err) => {
                console.log(err);
            })
    }

}









</script>

<style scoped>
input[type='button'] {
    margin-left: 10px;
}

span {
    margin: 0 5px;
    display: inline-block;
    padding: 10px;
}
</style>